<template>
	<view>
		<head-navbar :back="true" class="headNavbar" :bgColor="'#FE5900'">
			<view>
				<text style="color: #FFFFFF;">分组管理</text>
			</view>
		</head-navbar>
		<view class="list">
			<view class="item" v-for="(item,index) in list">
				<radio v-if="!item.status" color="#FE5900" class="rido" :checked="item.checked" @click="checkedChange(index)"/>
				<view class="title" v-if="!item.status">{{item.name}}</view>
				<input class="title" v-model="item.name" v-if="item.status" placeholder="请输入新的组名" />
				<view class="edtir" @click="toEditer(index)" :class="{over:item.status}">{{item.status?'完成':'编辑'}}</view>
			</view>
		</view>
		<view class="select">
			<label class="radio">
				<radio color="#FE5900" value="r1" :checked="allChecked" @click="allCheck"/>全选</label>
			<button class="delete" @click="deleteFun()">删除</button>
		</view>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	import * as api from '@/api/order/index.js';
	export default {
		data() {
			return {
				list: [],
				allChecked:false
			}
		},
		created() {
			this.getGroupList();
		},
		methods: {
			async toEditer(index) {
				this.list[index].status = !this.list[index].status
				console.log(this.list[index].status)
				if (this.list[index].status == false) {
					try {
						let params = {
							groupId: this.list[index].id,
							groupName: this.list[index].name
						}
						console.log(params)
						const ret = await api.upDateGroup(params);
						this.$refs.uToast.show({
							title: ret.data.msg
						})
					} catch (error) {
						this.$refs.uToast.show({
							title: error.data.msg,
							type: 'error'
						})
					}
				}
			},
			async getGroupList() {
				try {
					const res = await api.getGroupList();
					let list = res.data.obj
					list.forEach(e => {
						e.status = false;
						e.name = e.groupName;
						e.checked = false;
					})
					this.list = list;
				} catch (error) {
					console.log(error)
				}
			},
			checkedChange(index) {
				this.list[index].checked == true ? this.list[index].checked = false : this.list[index].checked = true;
			},
			allCheck() {
				this.allChecked == true ? this.allChecked = false : this.allChecked = true;
				if(this.allChecked == true ) {
					this.list.forEach(e=>{
						e.checked = true;
					})
				}else {
					this.list.forEach(e=>{
						e.checked = false;
					})
				}
			},
			async deleteFun() {
				try{
					let listGroup = []
					this.list.forEach(e=>{
						if(e.checked) {
							listGroup.push(e.id)
						}
					})
					const ret = await api.deleteGroup({groupIds:listGroup});
					this.$refs.uToast.show({
						title: ret.data.msg
					})
					this.getGroupList();
				}catch(error) {
					this.$refs.uToast.show({
						title: error.data.msg,
						type:'error'
					})
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.select {
		box-shadow: 0 0 10rpx #E0E0E0;
		height: 130rpx;
		display: flex;
		padding: 0 30rpx;
		align-items: center;
		justify-content: space-between;
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		z-index: 99;
		background: #FFFFFF;

		button {
			width: 140rpx;
			height: 50rpx;
			line-height: 50rpx;
			background: #FE5900;
			color: #FFFFFF;
			border-radius: 100rpx;
			font-size: 24rpx;
			margin: 0;
		}
	}

	.list {
		padding-bottom: 130rpx;

		.item {
			padding: 20rpx;
			background: #FFFFFF;
			border-bottom: 1px solid #f4f4f4;
			display: flex;
			align-items: center;

			.title {
				flex: auto;
				margin: 0 20rpx;
			}

			.edtir {
				padding: 10rpx 20rpx;
				border: 1rpx solid #f4f4f4;
				border-radius: 20rpx;
			}

			.over {
				background-color: #FE5900;
				color: #FFFFFF;
				border: 1rpx solid #FE5900;
			}
		}
	}
</style>
